<template>
    <el-container>
        <el-main>
            <StElDynamicForm @change="(form)=>{selectedAppCode = form.appCode}" :helper-form="helperForm" :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form,data)=>{queryParams = $stObjectTools.clone(data)}}"
                             :options="searchFormOptions" :origin-prop="{inline: true,labelWidth: '100px'}">
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                               @click="addTemplate" size="mini">添加
                    </el-button>
                </template>
            </StElDynamicForm>
            <StElTable ref="steltable" :options="columns" @loading="(val)=>{searchLoading = val}" :datas="this.tableDatas" :query-params="queryParams">
                <template #append>
                    <el-table-column
                            label="操作"
                            width="200">
                        <template #default="{row,column,$index}">
                            <StElButtonGroup :group-param="{row,column,$index}" :operationMoreButtonOptions="{stype: 'link'}" :operations="tableOperations">
                            </StElButtonGroup>
                        </template>
                    </el-table-column>

                </template>
            </StElTable>
            <el-dialog
                    title="模板消息发送"
                    :visible.sync="tempMsgSendDialogVisible"
                    width="800px">
                <MpTempMsgSend :app-code="msgSendProps.appCode"
                               :template-content="msgSendProps.templateContent"
                               :template-id="msgSendProps.templateId"
                               :template-title="msgSendProps.templateTitle"
                ></MpTempMsgSend>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import MpMixin from '../MpMixin.js'
    import MpUrl from '../MpUrl.js'
    import MpTempMsgSend from "./MpTempMsgSend"
    export default {
        name: "MpTempMsgList",
        mixins: [MpMixin],
        components:{
            MpTempMsgSend
        },
        props: {
        },
        computed: {
            tableDatas() {
                if(!this.queryParams.appCode){
                    return null
                }
                return this.$stStringTools.replaceb(this.MpUrl.MpTempMsgList, this.queryParams)
            }
        },
        data() {
            return {
                tempMsgSendDialogVisible: false,
                msgSendProps:{
                    appCode: null,
                    templateId: null,
                    templateContent: null,
                    templateTitle: null
                },
                // 仅添加用
                selectedAppCode: '',
                queryParams: {},
                searchLoading:  false,
                helperForm: {
                },
                searchFormOptions:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                ],
                columns:[
                    {
                        type: 'expand'
                    },
                    {
                        prop: 'templateId',
                        label:'模板id'
                    },
                    {
                        prop: 'title',
                        label:'模板标题'
                    },
                    {
                        prop: 'primaryIndustry',
                        label:'一级行业'
                    },
                    {
                        prop: 'deputyIndustry',
                        label:'二级行业'
                    },
                    {
                        prop: 'content',
                        label:'模板内容',
                        showInDetail: true
                    },
                    {
                        prop: 'example',
                        label:'模板示例',
                        showInDetail: true
                    },
                ],
                tableOperations: [{
                    label: '删除',
                    stype: 'link',
                    loading: false,
                    requestSuccess: ({groupParam}) => {
                        // 删除当前行，不重新请求
                        this.$refs.steltable.getTableData().splice(groupParam.$index, 1)
                    },
                    action: ({groupParam}) => {
                        return {
                            method: 'delete',
                            url: this.$stStringTools.replaceb(this.MpUrl.MpTempMsgDelete, {appCode: this.queryParams.appCode,templateId: groupParam.row.templateId}),
                            confirmText: `确定删除 ${groupParam.row.title}吗？删除后可能会导致已经使用该模板的功能失效！`
                        }
                    }
                },
                    {
                        label: '发送模板消息',
                        stype: 'link',
                        loading: false,
                        action: ({groupParam}) => {
                            this.sendTemplateMsg(groupParam.row)
                        }
                    },
                ]
            }
        },
        methods: {
            ensureAppCode(msgTip) {
                let appCode = this.selectedAppCode
                if(!appCode){
                    if(msgTip){
                        this.$message.error('请选择公众号')
                    }
                    return false
                }
                return appCode
            },
            // 添加模板到后台
            addTemplate() {
                let appCode = this.ensureAppCode(true)
                if(appCode === false){
                    return false
                }
                this.$prompt('请输入模板id', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPlaceholder: '模板id，微信官网后台模板库中模板的编号',
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '模板id不能为空'
                }).then(({ value }) => {
                    this.axios.post(this.$stStringTools.replaceb(this.MpUrl.MpTempMsgAdd, {appCode: appCode,templateId: value}))
                        .then(res=>{
                            this.$message.success('添加成功，请重新查询查看')
                        }).catch(error=>{
                        if(error.response){
                            if(error.response.data && error.response.data.errorMsg){
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    })
                }).catch(() => {

                })
            },
            // 发送模板消息
            sendTemplateMsg(row) {
                let appCode = this.ensureAppCode(true)
                if(appCode === false){
                    return false
                }
                this.msgSendProps.appCode = appCode
                this.msgSendProps.templateId = row.templateId
                this.msgSendProps.templateContent = row.content
                this.msgSendProps.templateTitle = row.title
                this.tempMsgSendDialogVisible = true

            }
        }
    }
</script>

<style scoped>

</style>